<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../index.css">
</head>

<style>

</style>
<body>

<!--
v-model 配合表单元素使用
-->

<div id="app">
    <el-form :model="form" :rules="rules">
        <el-form-item label="活动名称" prop="name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>


        <el-form-item label="活动区域">
            <el-select v-model="form.sex">
                <el-option label="男" value="0"></el-option>
                <el-option label="女" value="1"></el-option>
            </el-select>
        </el-form-item>


        <el-form-item label="活动性质">
                <el-checkbox label="美食/餐厅线上活动" v-model="form.type"></el-checkbox>
                <el-checkbox label="地推活动" v-model="form.type"></el-checkbox>
                <el-checkbox label="线下主题活动" v-model="form.type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" v-model="form.type"></el-checkbox>
        </el-form-item>

        <el-form-item label="活动形式">
            <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>

        <el-button type="success" @click="save">提交</el-button>
    </el-form>


</div>

<script src="../vue.js"></script>
<script src="../index.js"></script>
<script>

    var vm = new Vue({
        el:"#app",
        // data:{
        //
        // },
        data(){
           return{
               form:{
                   type:[]
               },
               rules:{
                   name:[
                       { required: true, message: '请输入活动名称', trigger: 'blur' },
                       {

                           validator: (rule, value, callBack) => {
                               //value 当前框里面的值
                               if(value == "爸爸"){
                                   callBack(); //校验通过错误消息不传
                               } else {
                                   callBack("叫爸爸");
                               }

                           }

                       }
                   ]
               }
           }
        },
        created(){
            //ajax
        },
        mounted(){

        },
        methods:{
            save(){
                console.log(this.form);
            }
        }
    })


</script>

</body>
</html>
